<script setup lang="ts">

import ChatListItem from "./ChatListItem.vue";
import {getCurrentInstance, Ref, ref} from "vue";
import MemberItem from "./MemberItem.vue";
import {ChatItem, Dictionary, FriendDTO, FriendsListData, Group, UserInfo} from "common";
import {getFriendList, getGroups, setCookie} from "../api";
import {getChineseHeadLetter} from "../util/StringUtil.ts";
import {useRootStore} from "../stores/root.ts";
import {storeToRefs} from "pinia";
const friendList:Ref<FriendsListData> = ref([])
const groupList:Ref<Group[]> = ref([])
const allData:Ref<FriendDTO[]> = ref([])
const rootStore = useRootStore()
const {userInfo,Cookie}=storeToRefs(rootStore)
const loadData = ()=>{
  let map:Dictionary = {}
  console.log(Cookie.value)
  setCookie(Cookie.value)
  getFriendList().then(res=>{
    let list:FriendDTO[] = res.data.data;
    allData.value=list;
    list.forEach(item=>{
      let category:string = getChineseHeadLetter(item.name);
      if(!map[category]){
        map[category]=[]
      }
      map[category].push({userId:item.friendId,avatar:item.avatar,name:item.name})
      console.log(map)
    })
    for(let i = 65; i <= 90; i++){
      let category = String.fromCharCode(i);
      if(map[category]) {
        friendList.value.push({category: category, members: map[category]})
      }
    }
    console.log(list)
    console.log(friendList.value)
  })
  setCookie(Cookie.value)
  getGroups().then(res=>{

    groupList.value=res.data.data
  }).catch(e=>{
    console.log(e)
  })
}

const emit = defineEmits(['handleChat'])

const handleChat = (userInfo:UserInfo|FriendDTO)=>{
  if(!userInfo.userId){
    userInfo.userId = (userInfo as FriendDTO).friendId
  }
  emit("handleChat",userInfo)
}

const handleGroupChat = (group:Group)=>{
  emit("handleChat",{userId:group.id,avatar:group.avatar,name:group.name,group:true})
}

loadData()
</script>

<template>
  <div class="friend-list" data-tauri-drag-region>
    <div class="search-panel" data-tauri-drag-region>

      <v-autocomplete variant="filled" append-inner-icon="mdi-magnify" density="compact" hide-details single-line :items="allData"
                      style="margin-left: 5px;flex: 1" item-title="name" item-value="friendId" menu-icon="">
        <template v-slot:chip="{ props, item }">
          <v-chip
              v-bind="props"
              :prepend-avatar="item.raw.avatar"
              :text="item.raw.name"
          ></v-chip>
        </template>
        <template v-slot:item="{props,item}">
          <member-item v-bind="props" :user-info="item.raw" @click="handleChat(item.raw)"></member-item>
        </template>
      </v-autocomplete>

      <v-icon icon="mdi-plus-box" class="add-member-btn"></v-icon>
    </div>
    <div class="member-list">
      <v-list :opened="['Users']" class="list-group-container">
        <v-list-group value="group">
          <template v-slot:activator="{ props }">
            <v-list-item
                v-bind="props"
                prepend-icon="mdi-account-group"
                title="群聊"
            ></v-list-item>

          </template>
          <member-item v-for="(member,index2) in groupList" :key="index2" :user-info="member" @click="handleGroupChat(member)"></member-item>
        </v-list-group>
        <v-list-group value="Users">
          <template v-slot:activator="{ props }">
            <v-list-item
                v-bind="props"
                prepend-icon="mdi-account-circle"
                title="好友"
            ></v-list-item>
          </template>
          <div v-for="(item,index) in friendList" :key="index" class="friend-list-item">
            <div class="category">{{item.category}}</div>
            <member-item v-for="(member,index2) in item.members" :key="index2" :user-info="member" @click="handleChat(member)"></member-item>
          </div>
        </v-list-group>
      </v-list>



    </div>
  </div>
</template>

<style scoped lang="scss">
.friend-list{
  height: 100%;
  width: 300px;
  display: flex;
  flex-direction: column;
  .search-panel {
    height: 60px;
    border-bottom: solid 1px #ddd;
    display: flex;
    align-items: center;

    .add-member-btn {
      margin: 0 5px;
      cursor: pointer;

      &:hover {
        color: #888888;
      }
    }
  }

  .member-list{
    background-color: #e8e8e8;
    flex: 1;
    overflow-y: auto;

    .list-group-container{
      background: transparent;
    }
    .category{
      margin-left: 10px;
    }

    .friend-list-item{
      border-bottom: solid 1px #ddd;
    }
  }



}

</style>
